import * as PIXI from 'pixi.js';
import GridLayer from './GridLayer';
import ReferViews from '../../core/ReferViews';
import StageConf from '../../conf/StageConf';
import ShapeLayer from './ShapeLayer';
import listener from '../../../listener';
import DrawLayer from './DrawLayer';
// const gesture = require('pixi-simple-gesture').default;
// import {pinchable, panable} from "../../../libs/pixi-simple-gesture/src/index.js"

// const gesture = require("../../../libs/pixi-simple-gesture/src/index.js").default


export default class SketchLayer extends PIXI.Sprite{
    gridLayer:GridLayer;
    shapeLayer:ShapeLayer;
    drawLayer:DrawLayer;

    background:PIXI.Graphics;
    startPoint:any;
    draging:boolean = false;
    drawing:boolean = false;

    constructor(){
        super();

        ReferViews.instance.sketch = this;
        this.background = new PIXI.Graphics();
        // this.background.interactive = true;
        this.addChild(this.background);

        this.gridLayer = new GridLayer();
        this.addChild(this.gridLayer);

        this.shapeLayer = new ShapeLayer();
        this.addChild(this.shapeLayer);

        this.drawLayer = new DrawLayer();
        this.addChild(this.drawLayer);

        this.init();
    }

    init(){
        var {width, height, scale} = StageConf;
        this.scale.set(scale, scale);
        this.x = window.innerWidth / 2 - width * scale / 2;
        this.y = window.innerHeight / 2 - height * scale / 2;
        this.draw();
        
        this.on("pointerdown", (e:any)=>{
            // console.log('pointer down');
            this.startPoint = e.data.global;
            this.draging = true;
            var {x, y} = this.startPoint;
            console.log(x, y);
        })
      
          
        this.on('pointermove', (e:any) => {
            var {x, y} = e.data.global;

            if(this.draging){
                var ox = x - this.startPoint.x;
                var oy = y - this.startPoint.y;
                this.x += ox;
                this.y += oy;
            }
            this.startPoint = {x, y};
        })
          
        this.on('pointerup', (e:any) => {
            console.log('pointerup', e);
            var p1 = this.startPoint;
            var p2 = e.data.global;
            // if(p1 == p2){
                console.log("click", p1);
                var p =  e.data.getLocalPosition(this.gridLayer);
                if(this.drawing){
                    this.drawLayer.addPoint(new PIXI.Point(p.x, p.y));
                }
            // }

            this.draging = false;
        })

        window.addEventListener("mousewheel", this.onScale.bind(this));

        listener.on("draw", (n:boolean) => {
            console.log(n);
            this.drawing = n;
            if(!n){
                console.log("make", this.drawLayer.shapeView.points);
                listener.emit("make", this.drawLayer.shapeView.points);
            }
        })

        listener.on("add", (str:string) => {
            var points:PIXI.Point[] = [];
            var list = str.replace(/\s/g, "").split(",");
            for(var i = 0, l = list.length; i < l; i += 2){
                var x:number = Number(list[i]);
                var y:number = Number(list[i + 1]);
                var point:PIXI.Point = new PIXI.Point(x, y);
                points.push(point);
            }
            this.shapeLayer.addPoints(points);
        })

        listener.on("clear", () => {
            this.shapeLayer.clear();
            this.drawLayer.clear();
        })
    }

    getPosition(p:any){
        var {scale} = StageConf;
        var cx, cy;
        cx = (p.x - this.x) / scale;
        cy = (p.y - this.y) / scale;
        return {x: cx, y: cy};
    }

    scaleAtPoint(p:any, ratio:number){
        var {width, height, scale} = StageConf;
        var os = scale;
        var ns = os * ratio;
        
        this.x -= (ns - os) * p.x;
        this.y -= (ns - os) * p.y;

        
        StageConf.scale = ns;
        this.scale.set(ns, ns);
        this.draw();
    }

    onScale(e:any){
        var ratio = e.deltaY > 0 ? 0.96 : 1.04;
        var p = this.getPosition({x: e.clientX, y: e.clientY});
        this.scaleAtPoint(p, ratio);
    }
    
    draw(){
        var {width, height} = StageConf;
        this.background.clear();
        this.background.beginFill(0xeaeaea, 1);
        this.background.drawRect(0, 0, width, height);
        this.background.endFill();

        this.gridLayer.draw();
        this.shapeLayer.draw();
        this.drawLayer.draw();
    }
    
}